<div ng-controller="EditarCuentaBancariaController">
    <!--menu de operaciones-->
    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
        <span ng-bind="alert.msg"></span>
    </alert>
    <fieldset>
        <legend style="padding-bottom: 5px;">
            <div class="row">
                <div class="col-sm-6">
                    Cuenta Bancaria
                    <span ng-if="cuentaBancaria.estado == 'INACTIVO'" class="label label-danger">Cuenta inactiva</span>
                </div>
                <div class="col-sm-6" nf-if="cuentaBancaria.estado != 'INACTIVO'" style="text-align: right;right;font-size: 14px;">
                    <div class="btn-group">
                        <button type="button" ng-if="cuentaBancaria.tipoCuentaBancaria == 'PLAZO_FIJO'" ng-click="renovarPlazoFijo()" popover="Renovar cuenta" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default">Renovar</button>
                        <button type="button" ng-if="cuentaBancaria.tipoCuentaBancaria == 'PLAZO_FIJO'" ng-click="recalcularPlazoFijo()" popover="Recalcular cuenta" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default">Recalcular</button>

                        <button type="button" ng-if="cuentaBancaria.estado == 'ACTIVO'" ng-click="congelarCuentaBancaria()" popover="Congelar cuenta" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default">Congelar</button>
                        <button type="button" ng-if="cuentaBancaria.estado == 'CONGELADO'" ng-click="descongelarCuentaBancaria()" popover="Descongelar cuenta" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default active">Congelar</button>
                        <button type="button" ng-if="cuentaBancaria.estado == 'ACTIVO' || cuentaBancaria.estado == 'CONGELADO'" ng-click="cancelarCuentaBancaria()" popover="Cancelar cuenta" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default">Cancelar</button>
                    </div>
                </div>
            </div>
        </legend>
    </fieldset>
    <div class="row">
        <!--Datos de socio-->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-6" style="font-weight: bold;">Socio</div>
                        <div class="col-md-6">
                            <div class="text-right">
                                <button ng-if="socio.personaNatural" type="button" ng-click="editarSocioPersonaNatural()" class="btn btn-link" style="padding: 0px 12px;">
                                    Editar
                                </button>
                                <button ng-if="socio.personaJuridica" type="button" ng-click="editarSocioPersonaJuridica()" class="btn btn-link" style="padding: 0px 12px;">
                                    Editar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body" ng-show="!socio">
                    <p>Socio no Encontrado</p>
                </div>
                <table class="table table-condensed" ng-if="socio.personaNatural">
                    <tr>
                        <td colspan="1" style="width: 130px; font-size: 12px;"><strong>Documento:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind-template="{{socio.personaNatural.tipoDocumento.abreviatura}}/{{socio.personaNatural.numeroDocumento}}"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Ap. y Nombres:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind-template="{{socio.personaNatural.apellidoPaterno}} {{socio.personaNatural.apellidoMaterno}}, {{socio.personaNatural.nombres}}"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Fecha Nacimiento:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind="socio.personaNatural.fechaNacimiento |date : 'dd/MM/yyyy'"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Sexo:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind="socio.personaNatural.sexo"></span></td>
                    </tr>
                </table>
                <table class="table table-condensed" ng-if="socio.personaJuridica">
                    <tr>
                        <td colspan="1" style="width: 130px; font-size: 12px;"><strong>Documento:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind-template="{{socio.personaJuridica.tipoDocumento.abreviatura}}/{{socio.personaJuridica.numeroDocumento}}"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Socio:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind="socio.personaJuridica.razonSocial"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Nombre Comercial:</strong></td>
                        <td colspan="1" style="font-size: 12px;">
                           <span ng-bind="socio.personaJuridica.nombreComercial"></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Fecha Constituci&oacute;n:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind="socio.personaJuridica.fechaConstitucion | date : 'dd/MM/yyyy'"></span></td>
                    </tr>
                </table>
                <div class="panel-heading" ng-if="socio" style="font-weight: bold;">Datos Adicionales</div>
                <table class="table table-condensed" ng-show="socio">
                    <tr>
                        <td colspan="1" style="width: 130px; font-size: 12px;"><strong>Estado:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-cloak>{{socio.estado ? 'ACTIVO' : 'INACTIVO'}}</span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Fecha Asociado:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind="socio.fechaInicio | date : 'dd/MM/yyyy'"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Fecha Retiro:</strong></td>
                        <td colspan="1" style="font-size: 12px;">
                            <span ng-show="socio.fechaFin" ng-bind="socio.fechaFin | date:'dd/MM/yyyy'" ng-cloak></span>
                            <span ng-show="!socio.fechaFin" ng-cloak>NO REGISTRADO</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!--Datos de cuenta-->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-6" style="font-weight: bold;">Cuenta Bancaria</div>
                        <div class="col-md-6">
                            <div class="text-right">
                                <button ng-if="cuentaBancaria.tipoCuentaBancaria == 'PLAZO_FIJO'" type="button" ng-click="imprimirCertificado()" class="btn btn-link" style="padding: 0px 12px;">
                                    Certificado Plazo Fijo
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-body" ng-show="!cuentaBancaria">
                    <p>Cuenta no Encontrada</p>
                </div>
                <table class="table">
                    <tr>
                        <td colspan="1" style="width: 115px; font-size: 12px;"><strong>Tipo Cuenta:</strong></td>
                        <td colspan="3" style="font-size: 12px;"><span ng-bind="cuentaBancaria.tipoCuentaBancaria"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>N&uacute;mero Cuenta:</strong></td>
                        <td colspan="3" style="font-size: 12px;"><span ng-bind="cuentaBancaria.numeroCuenta"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Estado:</strong></td>
                        <td colspan="3" style="font-size: 12px;"><span ng-bind="cuentaBancaria.estado"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Fecha Apertura:</strong></td>
                        <td colspan="1" style="width: 100px; font-size: 12px;"><span ng-bind="cuentaBancaria.fechaApertura | date:'dd/MM/yyyy'"></span></td>
                        <td colspan="1" style="width: 140px; font-size: 12px;"><strong>Fecha Cancelaci&oacute;n:</strong></td>
                        <td colspan="1" style="font-size: 12px;"><span ng-bind="cuentaBancaria.fechaCierre | date:'dd/MM/yyyy'"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Moneda:</strong></td>
                        <td colspan="3" style="font-size: 12px;"><span ng-bind="cuentaBancaria.moneda.denominacion"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>Saldo Disponible:</strong></td>
                        <td colspan="3" style="font-size: 12px;"><span ng-bind="cuentaBancaria.saldo | currency : cuentaBancaria.moneda.simbolo"></span></td>
                    </tr>
                    <tr>
                        <td colspan="1" style="font-size: 12px;"><strong>N&deg; Retirantes:</strong></td>
                        <td colspan="3" style="font-size: 12px;"><span ng-bind="cuentaBancaria.cantidadRetirantes"></span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <!--Datos de titulares-->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-7" style="font-weight: bold;">Titulares&nbsp;
                        <span ng-cloak ng-show="control.titular.success" ng-bind-html="control.titular.message"></span>
                        </div>
                        <div ng-if="titulares" class="col-md-5">
                            <div class="text-right">
                                <button type="button" ng-click="goToFirmas()" class="btn btn-link" style="padding: 0px 12px;">
                                     Firmas
                                </button>
                                <button type="button" ng-click="addTitular()" class="btn btn-link" style="padding: 0px 12px;">
                                    Nuevo
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body" ng-show="!titulares.length">
                    <p>Titulares no Registrados</p>
                </div>
                <table class="table table-striped table-condensed" ng-show="titulares.length">
                    <tbody>
                    <tr ng-repeat="titular in titulares">
                        <td style="font-size: 12px;"><span ng-bind-template="{{titular.personaNatural.tipoDocumento.abreviatura}}/{{titular.personaNatural.numeroDocumento}}"></span></td>
                        <td style="font-size: 12px;"><span ng-bind-template="{{titular.personaNatural.apellidoPaterno}} {{titular.personaNatural.apellidoMaterno}}, {{titular.personaNatural.nombres}}"></span></td>
                        <td>
                            <button type="button" class="btn btn-info btn-xs" ng-click="editTitular($index)"><span class="glyphicon glyphicon-share"></span>Edit</button>
                            <button type="button" class="btn btn-danger btn-xs" ng-click="deleteTitular($index)"><span class="glyphicon glyphicon-remove"></span>Del</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--Datos de beneficiarios-->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-8" style="font-weight: bold;">
                            Beneficiarios&nbsp;
                            <span ng-cloak ng-show="control.beneficiario.success" ng-bind-html="control.beneficiario.message"></span>
                        </div>
                        <div class="col-md-4">
                            <div class="text-right">
                                <button type="button" ng-click="addBeneficiario()" class="btn btn-link" style="padding: 0px 12px;">
                                    Nuevo
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body" ng-show="!beneficiarios.length">
                    <p>Beneficiarios no Registrados</p>
                </div>
                <table class="table table-striped table-condensed" ng-show="beneficiarios.length">
                    <tbody>
                    <tr ng-repeat="beneficiario in beneficiarios">
                        <td style="font-size: 12px;"><span ng-bind="beneficiario.numeroDocumento"></span></td>
                        <td style="font-size: 12px;"><span ng-bind-template="{{beneficiario.apellidoPaterno}} {{beneficiario.apellidoMaterno}}, {{beneficiario.nombres}}"></span></td>
                        <td style="font-size: 12px;">
                        	<span ng-bind="beneficiario.porcentajeBeneficio"></span>
                        	<span>%</span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-info btn-xs" ng-click="editBeneficiario($index)"><span class="glyphicon glyphicon-share"></span>Edit</button>
                            <button type="button" class="btn btn-danger btn-xs" ng-click="deleteBeneficiario($index)"><span class="glyphicon glyphicon-remove"></span>Del</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- estado de cuenta-->
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-9" ng-hide="estadoCuentaSearcher" ng-animate="animate-show" style="font-weight: bold;">Estado de Cuenta</div>
                        <form ng-submit="buscarEstadoCuenta()">
                            <div ng-animate="animate-show" ng-show="estadoCuentaSearcher">
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">Desde</span>
                                        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="desde" is-open="openedDesde" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-default" ng-click="openDesde($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                    </span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">Hasta</span>
                                        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="hasta" is-open="openedHasta" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-default" ng-click="openHasta($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                    </span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <button type="submit" class="btn btn-default">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="text-right">
                                    <button type="button" class="btn btn-link" style="padding: 0px 12px;">
                                        Pdf
                                    </button>
                                    <button type="button" ng-click="changeEstadoCuentaSearcher()" class="btn btn-link" style="padding: 0px 12px;">
                                        Buscar
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div ng-grid="gridOptions" style="border: 1px solid rgb(212,212,212); height: 190px; font-size: 12px"></div>
                <div class="panel-footer">
                    Saldo Disponible:
                    <strong ng-bind="cuentaBancaria.saldo | currency : cuentaBancaria.moneda.simbolo"></strong>
                </div>
            </div>
        </div>
    </div>
    <button type="button" ng-click="salir()" class="btn btn-success">Salir</button>
</div>